<template>
  <el-table :data="userTable">
    <el-table-column property="userId" label="用户编号" ></el-table-column>
    <el-table-column property="userName" label="用户姓名"></el-table-column>
    <el-table-column property="department" label="所属部门"></el-table-column>
    <el-table-column property="position" label="职务"></el-table-column>
    <el-table-column property="roleName" label="角色名称"></el-table-column>
    <el-table-column  label="角色功能">
      <template slot-scope="scope">
        <div v-for="item in scope.row.functionList">
          <span>{{item}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column property="tel" label="联系电话"></el-table-column>
    <el-table-column property="email" label="邮箱"></el-table-column>
  </el-table>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "um-detail",
      data(){
          return{
            userTable: []
          }
      },
      methods:{
        getRoleByName(roleName){
          axios.post('/api/role/getRoleByName',{roleName}).then(res=>{
            if (res.data.status==='1') {
              // this.userTable[0].functionList=res.data.result;//这样做视图不会更新
              this.$set(this.userTable[0],'functionList',res.data.result);
            }
          })
        }
      },
      mounted(){
        this.userTable = [this.$route.params.row];
        this.getRoleByName(this.$route.params.row.roleName);
      }
    }
</script>

<style scoped>

</style>
